<script setup lang="ts">
import { ref, onMounted, computed, watch, reactive } from 'vue'
import { Modal, message } from 'ant-design-vue'
import { CheckCircleOutlined, 
  ClockCircleOutlined,
  ReloadOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import type { Dayjs } from 'dayjs'
import { getWebsiteContentsApi, updateWebsiteContentApi, type WebsiteContentItem } from '~/api/common/login'

defineOptions({
  name: 'Analysis',
})

const router = useRouter()
const loading = ref(false)
const contentList = ref<WebsiteContentItem[]>([])
const themeOptions = [
  { label: '经典蓝', value: 'classic' },
  { label: '冷静青', value: 'minimal' },
  { label: '深邃灰', value: 'slate' },
]
const activeTheme = ref<typeof themeOptions[number]['value']>('classic')
// 主题目前只作用在外层容器上
const selectedIds = ref<number[]>([])
const recycleVisible = ref(false)
const PRIMARY_MODAL_BUTTON_STYLE = {
  backgroundColor: '#428bca',
  border: 'none',
  borderRadius: '0',
  color: '#fff',
}
type ArticleStatusFilter = 'all' | 'published' | 'offline' | 'draft'
const searchForm = reactive({
  keyword: '',
  publishRange: undefined as [Dayjs, Dayjs] | [string, string] | undefined,
  status: 'all' as ArticleStatusFilter,
})
const appliedFilters = ref<{
  keyword: string
  publishRange?: [string, string]
  status: ArticleStatusFilter
}>({
  keyword: '',
  publishRange: undefined,
  status: 'all',
})

function normalizeDateValue(value: unknown): string | null {
  if (!value)
    return null
  if (typeof value === 'string')
    return value
  if (value instanceof Date)
    return value.toISOString().split('T')[0]
  if ((value as any)?.format)
    return (value as any).format('YYYY-MM-DD')
  if ((value as any)?.toISOString)
    return (value as any).toISOString().split('T')[0]
  return String(value)
}

const displayList = computed(() => {
  let list = contentList.value.filter(item => item.publish_status !== 3)
  const keyword = appliedFilters.value.keyword.trim().toLowerCase()
  if (keyword) {
    list = list.filter((item) => {
      const title = (item.title || '').toLowerCase()
      const author = (item.author || '').toLowerCase()
      const handler = (item.created_by || '').toLowerCase()
      const channel = (item as any).channel_name ? String((item as any).channel_name).toLowerCase() : ''
      return title.includes(keyword) || author.includes(keyword) || handler.includes(keyword) || channel.includes(keyword)
    })
  }
  if (appliedFilters.value.status !== 'all') {
    list = list.filter((item) => {
      if (appliedFilters.value.status === 'published')
        return item.publish_status === 1
      if (appliedFilters.value.status === 'offline')
        return item.publish_status === 2
      return item.publish_status !== 1 && item.publish_status !== 2
    })
  }
  if (appliedFilters.value.publishRange && appliedFilters.value.publishRange.length === 2) {
    const [start, end] = appliedFilters.value.publishRange
    const startTime = new Date(start).getTime()
    const endTime = new Date(`${end} 23:59:59`).getTime()
    list = list.filter((item) => {
      if (!item.publish_time)
        return false
      const publishTime = new Date(item.publish_time).getTime()
      return publishTime >= startTime && publishTime <= endTime
    })
  }
  return list
})


const statusMeta = (status: number) => {
  const map: Record<number, { text: string; type: 'success' | 'draft' | 'pending' | 'deleted' }> = {
    0: { text: '草稿', type: 'draft' },
    1: { text: '等待审核中', type: 'pending' },
    2: { text: '已发布', type: 'success' },
    3: { text: '已删除', type: 'deleted' },
  }
  return map[status] || { text: '草稿', type: 'draft' }
}

watch(displayList, (list) => {
  const ids = list.map(item => item.id)
  selectedIds.value = selectedIds.value.filter(id => ids.includes(id))
}, { immediate: true })

// 格式化日期
function formatDate(dateString: string): string {
  if (!dateString) return '-'
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  })
}

function handleSearch() {
  const start = searchForm.publishRange && searchForm.publishRange.length === 2
    ? normalizeDateValue(searchForm.publishRange[0])
    : null
  const end = searchForm.publishRange && searchForm.publishRange.length === 2
    ? normalizeDateValue(searchForm.publishRange[1])
    : null
  appliedFilters.value = {
    keyword: searchForm.keyword.trim(),
    status: searchForm.status,
    publishRange: start && end ? [start, end] : undefined,
  }
}

function handleReset() {
  searchForm.keyword = ''
  searchForm.publishRange = undefined
  searchForm.status = 'all'
  appliedFilters.value = {
    keyword: '',
    publishRange: undefined,
    status: 'all',
  }
}

function handleStatusChange(value: unknown) {
  const status = (value ?? 'all') as ArticleStatusFilter
  searchForm.status = status
  handleSearch()
}

function handleRefresh() {
  selectedIds.value = []
  fetchContentList()
}

function handleBatchWithdraw() {
  if (selectedIds.value.length === 0) {
    Modal.warning({
      title: '提示',
      content: '请先选择需要撤回的文章',
      okText: '好的',
      okButtonProps: { style: { ...PRIMARY_MODAL_BUTTON_STYLE } } as any,
      centered: true,
    })
    return
  }

  const selectedItems = displayList.value.filter(item => selectedIds.value.includes(item.id) && item.publish_status === 2)

  if (selectedItems.length === 0) {
    Modal.info({
      title: '提示',
      content: '仅已发布的文章可以撤回，请重新选择。',
      okText: '好的',
      okButtonProps: { style: { ...PRIMARY_MODAL_BUTTON_STYLE } } as any,
      centered: true,
    })
    return
  }

  Modal.confirm({
    title: '批量撤回确认',
    content: `确定要撤回 ${selectedItems.length} 篇文章吗？`,
    okText: '确定',
    cancelText: '取消',
    okButtonProps: { style: { ...PRIMARY_MODAL_BUTTON_STYLE } } as any,
    cancelButtonProps: { style: { borderRadius: '0' } } as any,
    centered: true,
    onOk: async () => {
      try {
        await Promise.all(
          selectedItems.map(item =>
            updateWebsiteContentApi({
              id: item.id,
              publish_status: 0, // 撤回为草稿
            }),
          ),
        )

        Modal.success({
          title: '提示',
          content: `成功撤回 ${selectedItems.length} 篇文章`,
          okText: '好的',
          okButtonProps: { style: { ...PRIMARY_MODAL_BUTTON_STYLE } } as any,
          centered: true,
          onOk: () => {
            fetchContentList()
          },
        })
        selectedIds.value = []
      } catch (error: any) {
        const errorMsg = error?.message || error?.msg || '批量撤回失败，请稍后重试'
        message.error(errorMsg)
      }
    },
  })
}

async function handleBatchPublish() {
  if (selectedIds.value.length === 0) {
    Modal.warning({
      title: '提示',
      content: '请先选择需要发布的文章',
      okText: '好的',
      okButtonProps: { style: { ...PRIMARY_MODAL_BUTTON_STYLE } } as any,
      centered: true,
    })
    return
  }

  const selectedItems = displayList.value.filter(item => selectedIds.value.includes(item.id) && item.publish_status !== 2)

  if (selectedItems.length === 0) {
    Modal.info({
      title: '提示',
      content: '所选文章均已发布，请重新选择未发布的文章。',
      okText: '好的',
      okButtonProps: { style: { ...PRIMARY_MODAL_BUTTON_STYLE } } as any,
      centered: true,
    })
    return
  }

  Modal.confirm({
    title: '批量发布确认',
    content: `确定要发布 ${selectedItems.length} 篇文章吗？`,
    okText: '确认发布',
    cancelText: '取消',
    okButtonProps: { style: { ...PRIMARY_MODAL_BUTTON_STYLE } } as any,
    cancelButtonProps: { style: { borderRadius: '0' } } as any,
    centered: true,
    onOk: async () => {
      try {
        await Promise.all(
          selectedItems.map(item =>
            updateWebsiteContentApi({
              id: item.id,
              publish_status: 2, // 与单条发布逻辑保持一致
            }),
          ),
        )

        Modal.success({
          title: '提示',
          content: `成功发布 ${selectedItems.length} 篇文章`,
          okText: '好的',
          okButtonProps: { style: { ...PRIMARY_MODAL_BUTTON_STYLE } } as any,
          centered: true,
          onOk: () => {
            fetchContentList()
          },
        })
        selectedIds.value = []
      } catch (error: any) {
        const errorMsg = error?.message || error?.msg || '批量发布失败，请稍后重试'
        message.error(errorMsg)
      }
    },
  })
}

function handleCreateArticle() {
  if (typeof router.hasRoute === 'function' && router.hasRoute('WebsiteContentCreate')) {
    router.push({ name: 'WebsiteContentCreate' })
    return
  }

  Modal.info({
    title: '新建文章',
    content: '开发中git。',
    okText: '知道了',
    okButtonProps: { style: { ...PRIMARY_MODAL_BUTTON_STYLE } } as any,
    centered: true,
  })
}

// 获取内容列表
async function fetchContentList() {
  loading.value = true
  try {
    const response = await getWebsiteContentsApi({ channel_id: undefined })
    const responseData = response
    if (response.code === 0 && responseData && Array.isArray(responseData.data)) {
      // 按置顶和发布时间排序：置顶优先，然后按发布时间倒序
      contentList.value = responseData.data.sort((a: WebsiteContentItem, b: WebsiteContentItem) => {
        if (a.is_top !== b.is_top) {
          return b.is_top - a.is_top // 置顶的在前
        }
        return new Date(b.publish_time || b.updated_at || b.created_at || 0).getTime() - new Date(a.publish_time || a.updated_at || a.created_at || 0).getTime() // 时间倒序
      })
    } else {
      contentList.value = []
    }
  } catch (error) {
    console.error('获取内容列表失败:', error)
    contentList.value = []
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchContentList()
})

function handleView(item: WebsiteContentItem) {
  router.push({ name: 'WebsiteContentDetail', params: { id: item.id } })
}

async function handleWithdraw(item: WebsiteContentItem) {
  Modal.confirm({
    title: '撤回确认',
    content: `确定要撤回《${item.title}》吗？撤回后文章状态将变为草稿。`,
    okText: '确认撤回',
    cancelText: '取消',
    okButtonProps: { style: { ...PRIMARY_MODAL_BUTTON_STYLE } } as any,
    cancelButtonProps: { style: { borderRadius: '0' } } as any,
    centered: true,
    onOk: async () => {
      try {
        await updateWebsiteContentApi({
          id: item.id,
          publish_status: 0, // 撤回后变为草稿状态
        })
        Modal.success({
          title: '提示',
          content: '撤回成功',
          okText: '好的',
          okButtonProps: { style: { ...PRIMARY_MODAL_BUTTON_STYLE } } as any,
          centered: true,
          onOk: () => {
            // 刷新列表
            fetchContentList()
          },
        })
      } catch (error: any) {
        const errorMsg = error.message || error.msg || '撤回失败，请稍后重试'
        message.error(errorMsg)
      }
    },
  })
}

function handleEdit(item: WebsiteContentItem) {
  router.push({ name: 'WebsiteContentEdit', params: { id: item.id } })
}

async function handlePublish(item: WebsiteContentItem) {
  Modal.confirm({
    title: '提交审核确认',
    content: `确定要提交《${item.title}》审核吗？`,
    okText: '提交审核',
    cancelText: '取消',
    okButtonProps: { style: { ...PRIMARY_MODAL_BUTTON_STYLE } } as any,
    cancelButtonProps: { style: { borderRadius: '0' } } as any,
    centered: true,
    onOk: async () => {
      try {
        await updateWebsiteContentApi({
          id: item.id,
          publish_status: 1, // 待审核
        })
        Modal.success({
          title: '提示',
          content: '已提交审核',
          okText: '好的',
          okButtonProps: { style: { ...PRIMARY_MODAL_BUTTON_STYLE } } as any,
          centered: true,
          onOk: () => {
            // 刷新列表
            fetchContentList()
          },
        })
      } catch (error: any) {
        const errorMsg = error.message || error.msg || '发布失败，请稍后重试'
        message.error(errorMsg)
      }
    },
  })
}

function handleDelete(item: WebsiteContentItem) {
  Modal.confirm({
    title: '删除确认',
    content: `确定要删除《${item.title}》吗？删除后可在回收站查看并恢复。`,
    okText: '确认删除',
    cancelText: '取消',
    okButtonProps: { style: { ...PRIMARY_MODAL_BUTTON_STYLE } } as any,
    cancelButtonProps: { style: { borderRadius: '0' } } as any,
    centered: true,
    onOk: async () => {
      try {
        await updateWebsiteContentApi({
          id: item.id,
          publish_status: 3,
        })
        message.success('已移入回收站')
        fetchContentList()
      } catch (error: any) {
        const errorMsg = error.message || error.msg || '删除失败，请稍后重试'
        message.error(errorMsg)
      }
    },
  })
}
// 添加处理行选择的方法
const handleRowSelectChange = (id: number, checked: boolean) => {
  if (checked) {
    if (!selectedIds.value.includes(id)) {
      selectedIds.value.push(id)
    }
  } else {
    const index = selectedIds.value.indexOf(id)
    if (index > -1) {
      selectedIds.value.splice(index, 1)
    }
  }
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
function handleCheckboxChange(id: number, e: any) {
  const checked = typeof e === 'boolean' ? e : (e?.target as HTMLInputElement)?.checked ?? false
  handleRowSelectChange(id, checked)
}

</script>

<template>
  <page-container>
    <div 
      style="position: relative; top:-30px;"
      :class="['dashboard-analysis', `theme-${activeTheme}`]">
      <!-- 工具栏部分 -->
      <div class="analysis-toolbar">
        <a-form :model="searchForm" layout="inline" class="toolbar-form">
          <a-form-item>
            <template #label>
              <span class="toolbar-label">关键词</span>
            </template>
            <a-input
              v-model:value="searchForm.keyword"
              placeholder="请输入标题、作者、编辑人等关键词"
              class="toolbar-input"
              allow-clear
              @press-enter="handleSearch"
            />
          </a-form-item>
          
          <a-form-item>
            <template #label>
              <span class="toolbar-label">发布状态</span>
            </template>
            <a-select
              v-model:value="searchForm.status"
              class="toolbar-select"
              style="width: 160px;"
              @change="handleStatusChange"
            >
              <a-select-option value="all">全部</a-select-option>
              <a-select-option value="published">待审核</a-select-option>
              <a-select-option value="offline">已发布</a-select-option>
              <a-select-option value="draft">草稿</a-select-option>
            </a-select>
          </a-form-item>
          
          <a-form-item>
            <template #label>
              <span class="toolbar-label">发布时间</span>
            </template>
            <a-range-picker
              v-model:value="searchForm.publishRange"
              class="toolbar-range-picker"
              format="YYYY-MM-DD"
            />
          </a-form-item>
          
          <a-form-item>
            <a-space>
              <a-button
                class="analysis-primary-btn"
                type="primary"
                @click="handleSearch">
                查询
              </a-button>
              <a-button 
                class="analysis-ghost-btn"
                @click="handleReset">
                重置
              </a-button>
            </a-space>
          </a-form-item>
        </a-form>
        
        <div class="toolbar-actions">
          <a-space>
            <a-button
              class="batch-action-btn analysis-primary-btn"
              type="primary"
              :disabled="selectedIds.length === 0"
              @click="handleBatchPublish">
              批量发布 ({{ selectedIds.length }})
            </a-button>
            <a-button
              class="batch-action-btn analysis-ghost-btn"
              :disabled="selectedIds.length === 0"
              @click="handleBatchWithdraw">
              批量撤回 ({{ selectedIds.length }})
            </a-button>
            <a-button
              class="refresh-btn analysis-ghost-btn"
              @click="handleRefresh">
              <template #icon>
                <ReloadOutlined />
              </template>
              刷新
            </a-button>
            <a-button
              class="new-article-btn"
              type="primary"
              @click="handleCreateArticle">
              <template #icon>
                <PlusOutlined />
              </template>
              新建文章
            </a-button>
          </a-space>
        </div>
      </div>
      
      <!-- 加载状态和空状态保持不变 -->
      <div v-if="loading" class="loading-container">
        <a-spin size="large" />
      </div>
      
      <div v-else-if="displayList.length === 0" class="empty-container">
        <a-empty description="暂无内容" :image="false" />
      </div>
      
      <!-- 重新设计的表格布局 -->
      <div v-else class="card-table-container">
        <div class="card-table">
          <div 
            v-for="item in displayList" 
            :key="item.id"
            class="table-card"
            :class="{ 'selected': selectedIds.includes(item.id) }"
          >
            <div class="card-checkbox">
              <a-checkbox 
                :checked="selectedIds.includes(item.id)"
                @change="(e: any) => handleCheckboxChange(item.id, e)"
              />
            </div>
            
            <div class="card-content">
              <!-- 第一行：仅展示标题 -->
              <div class="card-row first-row">
                <div class="title-section">
                  <button class="title-link" type="button" @click="handleView(item)">
                    {{ item.title }}
                  </button>
                  <span v-if="item.is_top === 1" class="top-flag">顶</span>
                </div>
              </div>
              
              <!-- 第二行：详细信息 -->
              <div class="card-row second-row">
                <div class="info-section">
                  <div class="info-item">
                    <span class="info-label">作者：</span>
                    <span class="info-value">{{ item.author || '-' }}</span>
                  </div>
                  
        
                  
                  <div class="info-item">
                    <span class="info-label">浏览量：</span>
                    <span class="info-value">{{ item.view_count ?? 0 }}</span>
                  </div>
                  
                  <div class="info-item">
                    <span class="info-label">编辑人：</span>
                    <span class="info-value">{{ item.created_by || '-' }}</span>
                  </div>
                  
                  <div class="info-item">
                    <span class="info-label">编辑时间：</span>
                    <span class="info-value">{{ formatDate(item.updated_at) }}</span>
                  </div>
                  
                  <div class="info-item">
                    <span class="info-label">发布时间：</span>
                    <span class="info-value">{{ formatDate(item.publish_time) }}</span>
                  </div>
                  
                  <div class="info-item">
                    <span class="info-label">栏目：</span>
                    <span class="info-value">{{ item.channel_name || '首页' }}</span>
                  </div>

                  <div class="info-item">
                    <span class="info-label">发布状态：</span>
                    <span class="status-pill" :class="statusMeta(item.publish_status).type">
                      <CheckCircleOutlined v-if="item.publish_status === 2" style="color: #52c41a; font-size: 16px;" />
                      <ClockCircleOutlined v-else-if="item.publish_status === 1" style="color: #fa8c16; font-size: 18px; font-weight: bold;" />
                      <PlusOutlined v-else-if="item.publish_status === 0" style="color: #c48a10; font-size: 16px;" />
                      <DeleteOutlined v-else style="color: #d93026; font-size: 16px;" />
                      <span>{{ statusMeta(item.publish_status).text }}</span>
                    </span>
                  </div>
                </div>
                
                <div class="actions-section">
                  <a-space size="small" wrap>
                    <button
                      class="text_button"
                      @click="handleView(item)"
                    >
                      查看
                    </button>
                    <button
                      v-if="item.publish_status !== 2 && item.publish_status !== 1"
                      class="text_button"
                      @click="handleEdit(item)"
                    >
                      编辑
                    </button>

                    <button
                      v-if="item.publish_status === 0"
                      class="text_button"
                      @click="handlePublish(item)"
                    >
                      发布
                    </button>


                    <button
                      v-if="item.publish_status === 2"
                      class="text_button"
                      @click="handleWithdraw(item)"
                    >
                      撤回
                    </button>

                    <button
                      class="text_button"
                      danger
                      @click="handleDelete(item)"
                    >
                      删除
                    </button>
                  </a-space>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 回收站弹窗保持不变 -->
      <a-modal
        v-model:open="recycleVisible"
        title="回收站"
        width="80%"
        :footer="null"
        class="recycle-modal"
      >
        <!-- 回收站表格代码 -->
      </a-modal>

    </div>
  </page-container>
</template> 



<style scoped lang="less">
@import './index.css';

@default-primary: #428bca;

.dashboard-analysis {
  padding: 20px;
  background-color: transparent;
  min-height: calc(100vh - 120px);
  font-size: 16px;
  --accent-color: @default-primary;
  --accent-color-strong: #5c9cd6;
  --accent-light: rgba(66, 139, 202, 0.08);
  --accent-title: #1f2d3d;
  --accent-border: rgba(66, 139, 202, 0.35);
  --accent-muted: #5c626b;
  --accent-surface: #ffffff;
}

:deep(.ant-table) {
  font-size: 16px;
}

:deep(.ant-table-thead > tr > th),
:deep(.ant-table-tbody > tr > td) {
  font-size: 16px;
}

.analysis-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 0 4px 24px;
}

.toolbar-form {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;

  :deep(.ant-form-item) {
    margin-bottom: 0;
  }
}

.toolbar-label {
  color: var(--accent-title);
  font-size: 16px;
  font-weight: 500;
  margin-right: 8px;
}

.toolbar-input {
  width: 260px;
  border-radius: 0;

  :deep(.ant-input) {
    border-radius: 0;
  }
}

.toolbar-select {
  :deep(.ant-select-selector) {
    border-radius: 0;
    border-color: var(--accent-border);
  }
}

.toolbar-range-picker {
  border-radius: 0;
  min-width: 240px;

  :deep(.ant-picker-range) {
    border-radius: 0;
  }
}

.toolbar-actions {
  display: flex;
  align-items: center;
}

.analysis-primary-btn {
  background: linear-gradient(135deg, var(--accent-color), var(--accent-color-strong));
  border: none;
  border-radius: 0;
  color: #fff;
  min-width: 88px;
  height: 36px;
  font-weight: 500;
}

.analysis-ghost-btn {
  border-radius: 0;
  border-color: var(--accent-color);
  color: var(--accent-color);

  &:hover {
    color: #fff;
    background: var(--accent-color);
    border-color: var(--accent-color);
  }
}

.recycle-btn {
  height: 40px;
  border-radius: 0;
}

.batch-action-btn {
  min-width: 150px;
  border-radius: 0;
  height: 40px;
  font-weight: 500;

  &:disabled {
    opacity: 0.55;
  }
}

.refresh-btn {
  height: 40px;
  border-radius: 0;
}

.new-article-btn {
  background: linear-gradient(135deg, var(--accent-color), var(--accent-color-strong));
  border: none;
  border-radius: 0;
  height: 40px;
  font-weight: 500;

  &:hover {
    opacity: 0.92;
  }
}

.title-link {
  border: none;
  background: transparent;
  color: var(--accent-color);
  font-size: 16px;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s, text-decoration 0.2s;

  &:hover {
    text-decoration: underline;
  }

  &:focus-visible {
    outline: none;
    text-decoration: underline;
  }
}

.dashboard-analysis.theme-classic {
  --accent-color: #428bca;
  --accent-color-strong: #5c9cd6;
  --accent-light: rgba(66, 139, 202, 0.1);
  --accent-title: #1f2d3d;
  --accent-border: rgba(66, 139, 202, 0.35);
  --accent-muted: #586273;
}

.dashboard-analysis.theme-minimal {
  --accent-color: #1f6f8b;
  --accent-color-strong: #328fb7;
  --accent-light: rgba(31, 111, 139, 0.1);
  --accent-title: #18323c;
  --accent-border: rgba(31, 111, 139, 0.35);
  --accent-muted: #4d5b63;
}

.dashboard-analysis.theme-slate {
  --accent-color: #465278;
  --accent-color-strong: #5b6a97;
  --accent-light: rgba(70, 82, 120, 0.12);
  --accent-title: #161b2d;
  --accent-border: rgba(70, 82, 120, 0.35);
  --accent-muted: #555d73;
}

.content-header {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  
  .page-title {
    font-size: 30px;
    font-weight: 600;
    color: var(--accent-color);
    margin: 0;
  }
}

.content-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;

  .toolbar-label {
    font-size: 16px;
    color: var(--accent-muted);
  }

  .theme-radio {
    :deep(.ant-radio-button-wrapper) {
      border-radius: 0;
      border-color: var(--accent-border);
      color: var(--accent-muted);
    }

    :deep(.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)) {
      color: #fff;
      background-color: var(--accent-color);
      border-color: var(--accent-color);
      box-shadow: none;
    }
  }
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  background-color: transparent;
  
  :deep(.ant-empty) {
    .ant-empty-image {
      display: none;
    }
    
    .ant-empty-description {
      color: #999;
      font-size: 16px;
    }
  }
}

/* antd Table 容器的额外样式 */
.content-table {
  margin-top: 8px;

  :deep(.ant-table-body)::-webkit-scrollbar,
  :deep(.ant-table-content)::-webkit-scrollbar {
    height: 6px;
  }

  :deep(.ant-table-body)::-webkit-scrollbar-thumb,
  :deep(.ant-table-content)::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.25);
  }

  :deep(.ant-table-body)::-webkit-scrollbar-track,
  :deep(.ant-table-content)::-webkit-scrollbar-track {
    background: transparent;
  }
}

.cover-box {
  width: 64px;
  height: 36px;
  border-radius: 4px;
  border: 1px dashed var(--accent-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--accent-muted);
  overflow: hidden;
  background-color: #fafafa;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.cell-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.top-flag {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--accent-color);
  color: #fff;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.handler-name {
  display: inline-block;
  padding: 2px 8px;
  background-color: rgba(66, 139, 202, 0.1);
  border-radius: 4px;
  color: var(--accent-color);
  font-weight: 500;
}

.status-icon {
  font-size: 18px;
  color: #21ba45;
  margin-right: 4px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color:gray;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  text-transform: none;

  &.success {
    color: #21ba45;
  }

  &.draft {
    color: #c48a10;
  }

  &.pending {
    color:rgb(108, 108, 109);

  }

  &.deleted {
    color: #d93026;
  }
}

.status-text.success {
  color: #21ba45;
}

.status-text.draft {
  color: #c48a10;
}

.status-text.pending {
  color: #1890ff;
}

.status-text.deleted {
  color: #d93026;
}

.action-btn {
  min-width: 72px;
  font-size: 16px;
  font-weight: 500;
  border:none;
  border-radius: 4px;

  &:not(:disabled) {
    border-color: rgba(66, 139, 202, 0.4);
    color: var(--accent-color);
  }

  &:hover:not(:disabled) {
    color: #fff;
    background-color: var(--accent-color);
    border-color: var(--accent-color);
  }

  &.publish-action {
    background-color: rgba(33, 186, 69, 0.12);
    color: #1ea03a;
    border-color: rgba(33, 186, 69, 0.4);

    &:hover {
      background-color: #21ba45;
      color: #fff;
      border-color: #21ba45;
    }
  }

  &:disabled {
    color: var(--accent-muted);
    border-color: rgba(0, 0, 0, 0.05);
    background-color: rgba(0, 0, 0, 0.02);
    cursor: not-allowed;
  }
}

.action-btn.delete-action {
  color: #d93026;
  border-color: rgba(217, 48, 38, 0.35);

  &:hover:not(:disabled) {
    color: #fff;
    background-color: #d93026;
    border-color: #d93026;
  }
}

.recycle-modal {
  :deep(.ant-modal-body) {
    max-height: 60vh;
    overflow: auto;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .dashboard-analysis {
    padding: 16px;
  }
  
  .content-header {
    flex-direction: column;
    align-items: flex-start;

    .page-title {
      font-size: 22px;
    }
  }

  .toolbar-actions {
    flex-wrap: wrap;
    gap: 12px;
  }
}

</style>